<template>
	<view class="page-box">
		<my-navbar
			:bgUrl="`${$imgurl}/static/user-bg.png`"
			title="我的"
			:scrollTop="scrollTop"
			:bgColor="'rgba(251,219,220,'+(scrollTop/10)+')'"
		/>
		<view class="box info-box">
			<view class="left">
				<view class="head">
					<image :src="userinfo.avatar" mode=""></image>
					<view class="em">已认证</view>
				</view>
				<view class="info" v-if="userinfo">
					<view class="h1">{{userinfo.nickname}}</view>
					<view class="tel" v-if="userinfo.phone">{{userinfo.phone}}</view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="tel" v-else>绑定手机号</button>
				</view>
				<navigator class="info" v-else url="/pages/login/index"><view class="h1">授权登录</view></navigator>
			</view>
			<navigator hover-class="on" url="./message/index" class="right">
				<image :src="`${$imgurl}/static/user-msg.png`" mode=""></image>
				<view class="em" v-if="no_look">{{no_look}}</view>
			</navigator>
		</view>
		<view class="box money-box" v-if="userinfo" :style="`background: url(${$imgurl}/static/user-money-bg.png) no-repeat; background-size: 100% 100%;`">
			<view class="money">
				<view class="val">
					{{userinfo.integral}}
				</view>
				<navigator hover-class="on" url="./bill" class="a">
					查看明细 <up-icon color="#FFD1B8" size="28rpx" name="arrow-right"></up-icon>
				</navigator>
			</view>
			<view class="msg">
				抵扣金总额
			</view>
		</view>
		<view class="box list-box">
			<view class="title">
				我的订单
				<navigator hover-class="on" class="a" url="/pages/goods/order/index?type=0"><view class="a">
					
				全部 <up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon></view></navigator>
			</view>
			<view class="order-box">
				<navigator url="/pages/goods/order/index?type=1" class="item">
					<image :src="`${$imgurl}/static/user-order-1.png`" mode=""></image>
					<view class="name">待付款</view>
				</navigator>
				<navigator url="/pages/goods/order/index?type=2" class="item">
					<image :src="`${$imgurl}/static/user-order-2.png`" mode=""></image>
					<view class="name">待发货</view>
				</navigator>
				<navigator url="/pages/goods/order/index?type=3" class="item">
					<image :src="`${$imgurl}/static/user-order-3.png`" mode=""></image>
					<view class="name">待收货</view>
				</navigator>
				<navigator url="/pages/goods/order/index?type=4" class="item">
					<image :src="`${$imgurl}/static/user-order-4.png`" mode=""></image>
					<view class="name">已完成</view>
				</navigator>
				<navigator url="/pages/goods/order/index?type=5" class="item">
					<image :src="`${$imgurl}/static/user-order-5.png`" mode=""></image>
					<view class="name">售后/退款</view>
				</navigator>
			</view>
		</view>
		
		<view class="box list-box">
			<view class="title">
				我的谜礼
			</view>
			<view class="order-box2">
				<navigator url="/pages/gift/order/index?type=2"  class="a">
					<view class="item">
						我发起的
						<up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</navigator>
				<navigator url="/pages/gift/order/index?type=1" class="a">
					<view class="item">
						我参与的
						<up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</navigator>
			</view>
		</view>
		<view class="box list-box">
			<view class="title">
				我的谜金
			</view>
			<view class="order-box2">
				<navigator url="/pages/bonus/order/index?type=1" class="a">
					<view class="item">
						我发起的
						<up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</navigator>
				<navigator url="/pages/bonus/order/index?type=2" class="a">
					<view class="item">
						我参与的
						<up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</navigator>
			</view>
		</view>
		<view class="box list-box">
			<view class="title">
				我的谜奖
			</view>
			<view class="order-box2">
				<navigator url="/pages/lottery/order/index?type=1" class="a">
					<view class="item">
						我发起的
						<up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</navigator>
				<navigator url="/pages/lottery/order/index?type=2" class="a">
					<view class="item">
						我参与的
						<up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</navigator>
			</view>
		</view>
		
		<view class="box list-box">
			<view class="title">
				常用功能
			</view>
			<view class="order-box">
				<navigator url="./collect" class="item">
					<image :src="`${$imgurl}/static/user-cygn-1.png`" mode=""></image>
					<view class="name">我的收藏</view>
				</navigator>
				<navigator url="/pages/goods/address/index" class="item">
					<image :src="`${$imgurl}/static/user-cygn-1.png`" mode=""></image>
					<view class="name">地址管理</view>
				</navigator>
				<button open-type="contact" class="item">
					<image :src="`${$imgurl}/static/user-cygn-2.png`" mode=""></image>
					<view class="name">平台客服</view>
				</button>
				<navigator url="./feedback" class="item">
					<image :src="`${$imgurl}/static/user-cygn-3.png`" mode=""></image>
					<view class="name">意见反馈</view>
				</navigator>
				<navigator url="./set" class="item">
					<image :src="`${$imgurl}/static/user-cygn-4.png`" mode=""></image>
					<view class="name">系统设置</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,computed,getCurrentInstance} from 'vue'
	import {useStore} from "vuex"
	import {onShow,onPageScroll} from "@dcloudio/uni-app"
	const scrollTop=ref(0)
	onPageScroll((e)=>{
		if(e.scrollTop>=30){
			scrollTop.value=30
		}else{
			scrollTop.value=e.scrollTop/3
		}
	})
	import {bindingPhone,messageSystem} from "@/api/user.js"
	const {proxy} =getCurrentInstance()
	const store=useStore()
	const userinfo=computed(()=>store.state.user.userinfo)
	const no_look=ref(0)
	onShow(async ()=>{
		if(store.state.user.token) store.dispatch('user/setUserInfo');
		let re=await messageSystem({params:{page:1,limit:10}},{custom: {loading:false,noAuth:false}})
		no_look.value=re.data.no_look
	})
	const getPhoneNumber=async (e)=>{
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			uni.login({
				success:async (res)=>{
					if(e.detail.code){
						let re = await bindingPhone({
							code: res.code,
							encryptedData:e.detail.encryptedData,
							iv:e.detail.iv
						})
						store.dispatch('user/setUserInfo')
					}
					// console.log(loginRes)
				}
			})
		}
		
	}
</script>
<style>
	page{
		background: #F5F6FA;
	}
</style>
<style lang="scss" scoped>
	.page-box{
		padding-bottom: 40rpx;
	}
	.info-box{
		padding:12rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.left{
			display: flex;align-items: center;
			.head{
				position:relative;
				image{
					width:100%;height:100%;
				}
				width:128rpx;height:128rpx;
				.em{
					position: absolute;
					background: linear-gradient( 146deg, #FFEACA 0%, #F4C986 100%);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					bottom:0;
					font-size:20rpx;line-height: 32rpx;
					padding:0 14rpx;
					color:#B72B07;
					left:50%;
					transform: translateX(-50%);
					white-space: nowrap;
				}
			}
			.info{
				margin-left:24rpx;line-height: 1;
				.h1{
					font-weight: bold;
				}
				.tel{
					padding:0;margin:0;
					font-size: 24rpx;
					color:#9DA0A6;
					margin-top:20rpx;
					background: initial;
					
					&:after,&:before{
						display: none;
					}
				}
			}
		}
		.right{
			margin-top: 24rpx;
			position: relative;
			image{
				width:32rpx;height:32rpx;
			}
			.em{
				position: absolute;
				top:-12rpx;
				font-size:16rpx;
				border-radius: 90rpx;
				background-color: #FF6534;
				line-height: 28rpx;
				right:0;
				transform: translateX(50%);
				padding:0 6rpx;
				color:#fff;
			}
		}
	}
	.money-box{
		margin-top:36rpx;
		padding:36rpx 32rpx;
		.money{
			display: flex;align-items: center;
			justify-content: space-between;
			.val{
				font-size: 38rpx;
				font-weight: bold;
				color:#fff;
			}
			.a{
				display: flex;align-items: center;font-size: 24rpx;
				color:#FFD1B8;
				image{
					width:16rpx;height:24rpx;margin-left:8rpx;
				}
				
			}
		}
		.msg{
			font-size:24rpx;
			color:#FFD1B8;margin-top:24rpx;
		}
	}
	.list-box{
		background-color: #fff;
		margin-top: 16rpx;
		padding:28rpx;
		border-radius: 16rpx;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 1;
			font-weight: bold;
			.a{
				display: flex;
				align-items: center;
				font-size:24rpx;
				color:#838A99;
				font-weight: initial;
			}
		}
	}
	.order-box{
		display: flex;
		justify-content: space-between;
		margin-top:40rpx;
		.item{
			line-height: 1;
			padding-bottom: 12rpx;
			margin:0;
			background-color: initial;
			&:after,&:before{
				display: none;
			}
			image{
				width:52rpx;height:52rpx;margin:0 auto;
				display: block;
			}
			.name{
				margin-top:20rpx;font-size:26rpx;
			}
		}
	}
	.order-box2{
		display: flex;
		gap: 18rpx;
		margin-top:32rpx;
		padding-bottom: 12rpx;
		.a{
			flex:1;
			background-color: #F5F6FA;
			line-height: 92rpx;
			border-radius: 8rpx;
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 24rpx;font-size:28rpx;
				color:#141311;
			}
		}
	}
</style>
